<!doctype html>
<html xmlns:th="www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<TITLE>廖老师的作业论坛</TITLE>
<link href="/webjars/layui/2.5.6/css/layui.css" type="text/css" rel="stylesheet">
<Link href="/style/style.css" rel="stylesheet" type="text/css"/>
<script src="/webjars/vue/2.5.16/vue.min.js"></script>
<script src="/webjars/axios/0.21.1/dist/axios.min.js"></script>
<script src="/webjars/layui/2.5.6/layui.all.js"></script>
<script src="/js/hwc.js"></script>
</HEAD>
<BODY>
	<header id="ph">
		<style>
			marquee *{ vertical-align: middle; }
			marquee img{ border: 3px solid rgba(0,0,0,0) }
			marquee img:hover{ border: 3px inset #aaf }
		</style>
		<DIV class="h" style="background-color: #393D49;border:0px;text-align: center; position: fixed;width: 100%;z-index: 99;margin-top: -75px">
			<h1 class="left" style="color: #fff;height: 60px;line-height: 60px;margin-left: 10px">
				<a href="/" style="color: #fff">廖老师的作业论坛</a>
			</h1>
			<marquee th:if="${application?.loginedUsers?.values().size()}>0" 
				style="display: inline-block;color: #fff;width:50%;height: 60px;line-height: 60px; cursor: pointer;"
				th:scrollamount="${application?.loginedUsers?.values().size()}*0.5+6" onmouseover="stop()" onmouseout="start()">
				<div th:each="u : ${application?.loginedUsers?.values()}" style="display: inline-block;">
					<a th:href="'mylist?id='+${u.id}">
					<img th:src="${u.head}" style="height: 50px;width: auto;margin-left: 10px" class="layui-nav-img">
					</a>
					<span class="layui-badge layui-bg-blue right" style="margin-left: -60px" th:text="${u.name.substring(0,1)}"></span>
				</div>
				<span style="font-size:1.5em;color:#fff" th:text="${application?.loginedUsers?.size()} + '人在线…'"></span>
			</marquee>
			<ul class="layui-nav right">
			  <li class="layui-nav-item" v-if="nof>0">
			    <a href="mylist">我的作业 <span class="layui-badge" style="top:45%">{{nof}}</span></a>
			  </li>
			  <li class="layui-nav-item" th:if="${session?.loginedUser}==null">
			  	<a href="to_login">登录</a>
			  </li>
			  <li class="layui-nav-item" th:if="${session?.loginedUser}!=null">
			    <a>{{user.clsSn}}班：{{user.name}}
			    	<img :src="user.head" style="height: 50px;width: auto;margin-left: 10px" class="layui-nav-img">
			    </a>
			    <dl class="layui-nav-child">
			      <dd><a>我的学伴
			      		<layselect :items="bns" @change="document.cookie='mybn='+arguments[0]+';max-age=604800';bn();"
							:select="getCookie('mybn')">
					    </layselect></a>
			      </dd>
			      <dd th:if="${session?.loginedUser?.role}==0"><a>进入
			      		<layselect items="list/allCls" th:select="${session?.loginedUser?.clsSn}"
							@change="axios.get('user/changeCls?clsSn='+arguments[0]).then(r=>{location.reload(true)})">
					    </layselect>
			      </dd>
			      <dd><a href="to_setpwd">修改密码</a></dd>
			      <dd><a href="to_myinfo">我的信息</a></dd>
			      <dd th:if="${session?.loginedUser?.role}==0"><a href="go_stu_edit">注册</a></dd>
			      <dd><a href="logout">退出</a></dd>
			    </dl>
			  </li>
			</ul>
			<div style="clear: both;"></div>	
			<!-- 漂浮 -->
			<div id="goodstu" style="position: absolute; left:-500px;text-align: left">
				<div style="display: inline-block;">
					<div style="border-radius: 50%;overflow: hidden;display: inline-block;">
						<a :href="'to_detail?id='+(cmt && cmt.task ? cmt.task.id : '')">
							<img :src='cmt && cmt.inUser ? cmt.inUser.head : user.head' style="width: 70px"/>
						</a>
					</div>
					<span class="layui-badge layui-bg-blue right" style="margin-left: -60px">{{cmt&&cmt.inUser ? cmt.inUser.name.substring(0,1) : user.name.substring(0,1)}}</span>
				</div>
				<div style="display: inline-block;background-color: #eee; border: 1px solid #333;padding: 5px;border-radius: 10px;max-width: 200px;vertical-align: top;font-size: 1.5em"
					class="rowcontent" v-html="cmt ? charImg(cmt.content,30) : '我很无语'"></div>
			</div>
			<load th:if="${session.loginedUser}!=null" th:url="'val/NoFinish?uid=' + ${session?.loginedUser?.id}" data="nof"></load>
		</DIV>
		<script type="text/javascript" src="demo/漂浮气球/js/moveobj.js"></script>
		<script type="text/javascript">
			var uv = vue(".h","nof",{data:{
				user : {
					clsSn:'[[${session?.loginedUser?.clsSn}]]',
					name:'[[${session?.loginedUser?.name}]]',
					head:'[[${session?.loginedUser?.head}]]'
				},
				bns : ["chitose","haruto","hibiki","hijiki","izumi","koharu","miku","ni-j","nico","nipsilon","nito","shizuku","tororo","tsumiki","unitychan","wanko","z16"],
				cmt : null
			},
			created(){
				axios.get("task/comment/find?order=task.id!,id&size=50").then(res=>{
					let i=0;
					setInterval(()=>{
						this.cmt = res.data.content[ i<res.data.content.length?i++:i=0];
					},3000);
					new Chip("goodstu");
				});
			}});
		</script>
	</header>
	<main class="layui-fluid">
	<!--      导航        -->
	<div style="padding: 3px 8px">
		<span class="layui-breadcrumb">
			<a href="/"><cite>作业论坛首页</cite></a>
		</span>
	</div>
	<div style="float:left; width:100%; margin-right:-330px">
		<DIV id="mainleft" style="margin-right:330px">
			<DIV class="t">
				<TABLE cellSpacing="0" cellPadding="0" width="100%">
					<TR class="tr2" align="center">
						<TD style="width: 5%" >图标</TD>
						<TD style="width: 20%">课程</TD>
						<TD style="width: 35%">最新作业</TD>
						<TD style="width: 40%">最新回复</TD>
					</TR>
					<!--       主版块       -->
					<!--       子版块       -->
					<template v-for="c in courses">
					<TR class="tr3" v-if="showStage(c) == true">
						<TD colspan="4" bgcolor="#eee">{{c.stage}} 阶段课程</TD>
					</TR>
					<TR class="tr3">
						<TD class="center">
							<IMG v-if="c.pic" :src="'image/course/'+c.pic" height="26px"> 
							<IMG v-else src="image/board.gif">
						</TD>
						<TH align="left">
							<A :href="'to_list?' + c.id">{{c.name}}</A>
						</TH>
						<TD class="rowcontent">
							<A v-if="c.data.maxname" :href="'to_detail?id='+c.data.maxid">
								<span v-html="charImg(c.data.maxname,30)"></span>
							</A>
						</TD>
						<TD class="rowcontent">
							<IMG v-if="c.data.content" :src="c.data.head" height="26px">
							<A v-if="c.data.content" :href="'to_detail?id='+c.data.tid">
								<span>{{c.data.name}}：</span><span v-html="charImg(c.data.content,30)"></span>
							</A>
						</TD>
					</TR>
					</template>
				</TABLE>
				<load url="hwctask/course/find?order=stage,sort,id" data="courses" field="content"
					 join="list/CourseTasks" on="id=cid"></load>
			</DIV>
			<br>
			<h2>他山之石</h2>
			<div class="layui-fluid" style="padding: 2px">
			  <div class="layui-row layui-col-space10">
			   	<category v-for="n of getTypes()" :data="articles.filter(i=>i.type.id==n)"></category>
			  </div>
			</div>
			<load url="task/article/new10" data="articles"></load>
		</div>
		<script type="text/javascript">
		// 必须放在外面，否则会产生诡异的死循环
		var currStage = null;
		
		var v = new Vue({
			el : "#mainleft",
			data : {
				courses:[],
				articles:[]
			},
			methods:{
				showStage(course){
					if(currStage != course.stage){
						currStage = course.stage;
						return true;
					} else {
						return false;
					}
				},
				getTypes(){
					types = [];
					a : for(let a of this.articles){
						for( let t of types){
							if(t == a.type.id){
								continue a;
							}
						}
						types.push(a.type.id);						
					}
					types.sort();
					return types;
				}
			},
		})
	</script>
	</div>
	<div id="right_side" style="float:right; width:330px">
		<link href="/demo/风云榜/css/style.css" type="text/css" rel="stylesheet">
		<style type="text/css">
			.side-panel{
				border: 1px solid #999;
				border-radius: 10px;
				margin: 0px 0px 10px 10px
			}
			.side-panel li{
				line-height: 26px;
				vertical-align: middle;
			}
			.side-panel li:hover{
				background-color: #eee
			}
			.side-panel h3{
				text-align: center;
				margin: 10px auto 15px;
				font-weight:bolder;
				color: #666;
			}
			.side-panel .nmspan{
				width: 4em;
				vertical-align: middle;
			}
			.side-panel .stspan{
				padding: 0px 2px;
				float: right;
				margin: 3.5px;
			}
		</style>
		<div id="ctc">
			<article th:if="${session?.loginedUser}!=null" class="leaderboard" style="padding: 0px 10px 10px;box-shadow:0 0 black;">
			  <header>
			
			    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve" class="leaderboard__icon">
			      <g>
			        <g>
			          <path d="M466.45,49.374c-7.065-8.308-17.368-13.071-28.267-13.071H402.41v-11.19C402.41,11.266,391.143,0,377.297,0H134.705
						c-13.848,0-25.112,11.266-25.112,25.112v11.19H73.816c-10.899,0-21.203,4.764-28.267,13.071
						c-6.992,8.221-10.014,19.019-8.289,29.624c9.4,57.8,45.775,108.863,97.4,136.872c4.717,11.341,10.059,22.083,16.008,32.091
						c19.002,31.975,42.625,54.073,68.627,64.76c2.635,26.644-15.094,51.885-41.794,57.9c-0.057,0.013-0.097,0.033-0.153,0.046
						c-5.211,1.245-9.09,5.921-9.09,11.513v54.363h-21.986c-19.602,0-35.549,15.947-35.549,35.549v28.058
						c0,6.545,5.305,11.85,11.85,11.85H390.56c6.545,0,11.85-5.305,11.85-11.85v-28.058c0-19.602-15.947-35.549-35.549-35.549h-21.988
						V382.18c0-5.603-3.893-10.286-9.118-11.52c-0.049-0.012-0.096-0.028-0.145-0.04c-26.902-6.055-44.664-31.55-41.752-58.394
						c25.548-10.86,48.757-32.761,67.479-64.264c5.949-10.009,11.29-20.752,16.008-32.095c51.622-28.01,87.995-79.072,97.395-136.87
						C476.465,68.392,473.443,57.595,466.45,49.374z M60.652,75.192c-0.616-3.787,0.431-7.504,2.949-10.466
						c2.555-3.004,6.277-4.726,10.214-4.726h35.777v21.802c0,34.186,4.363,67.3,12.632,97.583
						C89.728,153.706,67.354,116.403,60.652,75.192z M366.861,460.243c6.534,0,11.85,5.316,11.85,11.85v16.208H134.422v-16.208
						c0-6.534,5.316-11.85,11.85-11.85H366.861z M321.173,394.03v42.513H191.96V394.03H321.173z M223.037,370.331
						c2.929-3.224,5.607-6.719,8.002-10.46c7.897-12.339,12.042-26.357,12.228-40.674c4.209,0.573,8.457,0.88,12.741,0.88
						c4.661,0,9.279-0.358,13.852-1.036c0.27,19.239,7.758,37.45,20.349,51.289H223.037z M378.709,81.803
						c0,58.379-13.406,113.089-37.747,154.049c-23.192,39.03-53.364,60.525-84.956,60.525c-31.597,0-61.771-21.494-84.966-60.523
						c-24.342-40.961-37.748-95.671-37.748-154.049V25.112c0-0.78,0.634-1.413,1.412-1.413h242.591c0.78,0,1.414,0.634,1.414,1.413
						V81.803z M451.348,75.192c-6.702,41.208-29.074,78.51-61.569,104.191c8.268-30.283,12.631-63.395,12.631-97.58V60.001h35.773
						c3.938,0,7.66,1.723,10.214,4.726C450.915,67.688,451.963,71.405,451.348,75.192z" />
			        </g>
			      </g>
			      <g>
			        <g>
			          <path d="M327.941,121.658c-1.395-4.288-5.103-7.414-9.566-8.064l-35.758-5.196l-15.991-32.402
						c-1.997-4.044-6.116-6.605-10.626-6.605c-4.511,0-8.63,2.561-10.626,6.605l-15.991,32.402l-35.758,5.196
						c-4.464,0.648-8.172,3.775-9.566,8.065c-1.393,4.291-0.231,8.999,2.999,12.148l25.875,25.221l-6.109,35.613
						c-0.763,4.446,1.064,8.938,4.714,11.59c3.648,2.651,8.487,3,12.479,0.902L256,190.32l31.982,16.813
						c1.734,0.911,3.627,1.36,5.512,1.36c2.456,0,4.902-0.763,6.966-2.263c3.65-2.652,5.477-7.144,4.714-11.59l-6.109-35.613
						l25.875-25.221C328.172,130.658,329.334,125.949,327.941,121.658z M278.064,146.405c-2.793,2.722-4.068,6.644-3.408,10.489
						l3.102,18.09l-16.245-8.541c-1.725-0.908-3.62-1.36-5.514-1.36c-1.894,0-3.788,0.454-5.514,1.36l-16.245,8.541l3.102-18.09
						c0.66-3.844-0.615-7.766-3.408-10.489l-13.141-12.81l18.162-2.64c3.859-0.56,7.196-2.985,8.922-6.482l8.123-16.458l8.122,16.458
						c1.727,3.497,5.062,5.921,8.922,6.482l18.162,2.64L278.064,146.405z" />
			        </g>
			      </g>
			    </svg>
			
			    <h1 class="leaderboard__title"><span class="leaderboard__title--top">风云榜</span>
			    	<span class="leaderboard__title--bottom" th:text="${session?.loginedUser.clsSn}+'班'"></span></h1>
			  </header>
			  
			  <main class="leaderboard__profiles">
			    <article v-for=" t in tops.content" class="leaderboard__profile" @click="open('mylist?id='+t.in_user,'_blank')">
			      <img :src="t.head" :alt="t.name" class="leaderboard__picture">
			      <span class="leaderboard__name" style="font: 1.5em">{{t.name}}</span>
			      <span class="leaderboard__value" style="width:100px">
			      	<img v-for=" i of parseInt(t.progress/t.allp*5)" src="/demo/评分/img/star1.png" height="15px">
			      </span>
			    </article>
			  </main>
			  <page url="top/TaskLogTop?group=cls_sn&condition=progress&tops=99&mycls" data="tops" size="5" :layout="['prev', 'next']"></page>
			</article>
		
		  	<div class="side-panel">
				<h3><a href="mylist">我的作业</a></h3>
				<ul style="padding: 5px 5px 5px 20px">
					<li v-for="(o) in tasks.content" style="list-style: disc;">
						<a :href="'to_detail?id='+o.id">
							{{o.name}}
						</a>
						<span v-if=" ! o.log.progress" class="stspan layui-badge layui-bg-orange">
							<a :href="param()?'javascript:;':('to_tasklog?task.id='+o.id)">未完成</a>
						</span>
						<span v-else-if="o.log.progress==100" class="stspan layui-badge layui-bg-green">
							<a :href="'to_tasklog?id='+o.log.id">已完成</a>
						</span>
						<span v-else class="stspan layui-badge layui-bg-cyan">
							<a :href="'to_tasklog?id='+o.log.id">完成中</a>
						</span>
					</li>
				</ul>
			  	<div class="layui-row" style="margin-top: 10px;">
			  		<div class="layui-col-md12">
						<page :url="'task/task/find?order=id!&clsSn=' + myClsSn" data="tasks" 
							:join="'list/TaskExt?uid=' + myId" on="id=task_id==>log" :layout="['prev', 'next']"></page>
			  		</div>
			  	</div>
		  	</div>
		  	<div class="side-panel">
				<h3><a href="mylist">最新提交</a></h3>
				<ul style="padding: 5px">
					<li v-for="(l,i) in logs.content">
					<a :href="'mylist?id='+l.inUser.id">
					<img :src="l.inUser.head" style="height: 22px"/>
					<span v-if="l.progress==100" class="nmspan layui-badge layui-bg-green">{{l.inUser.name}}</span>
					<span v-else class="nmspan layui-badge layui-bg-cyan">{{l.inUser.name}}</span>
					</a>
					<a :href="'to_tasklog?id='+l.id">
						{{castDateFormat(l.inTime,'hh:mm')}} {{subline(l.task.name,10)}}
					</a>
					<span class="stspan layui-badge layui-bg-orange"
						v-if="new Date().getTime()-parseDate(l.inTime).getTime()<60*60*1000*12 || logs.number==0 && i<3">新</span>
					</li>
				</ul>
			  	<div class="layui-row" style="margin-top: 10px">
			  		<div class="layui-col-md5" style="text-align: right;">
			  			<layselect items="list/allCls" model="clsSn" @change="refreshTop" 
			  				style="width:100px; height:29px;" empty="全部">
			  		</div>
			  		<div class="layui-col-md7">
						<page url="hwctask/taskLog/find?order=id!&inUser.role=1" data="logs" :layout="['prev', 'next']"
							@send="send" ref="page"></page>
			  		</div>
			  	</div>
		  	</div>
		</div>
		<script type="text/javascript">
			// 必须放在外面，否则会产生诡异的死循环
			var topv = new Vue({
				el : "#ctc",
				data : {
					clsSn:"",
					myClsSn:'[[${session?.loginedUser?.clsSn}]]',
					myId:'[[${session?.loginedUser?.id}]]',
					logs:{},
					tasks:{},
					tops:{}
				},
				methods:{
					send(param){
						if(this.clsSn){
							param.url+="&task.clsSn="+this.clsSn;
						}
					},
					refreshTop(val){
						this.$refs.page.query(1);
					}
				},
				mounted(){
					layui.element.render();
				}
			})
			function subline(str,size){
				if(str.length>size){
					return str.substring(0,size) + "...";
				} else {
					return str;
				}
			}
		</script>
	</div>
	</main>
	<footer style="clear: both;">
		<BR />
		<CENTER class="gray">源辰信息科技公司</CENTER>
		<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
		<script>
		   var arr = ["chitose","haruto","hibiki","hijiki","izumi","koharu","miku","ni-j","nico","nipsilon","nito","shizuku","tororo","tsumiki","unitychan","wanko","z16"];
			function bn(){
				let i = parseInt(Math.random() * arr.length);
				let name = getCookie("mybn") || arr[i];
			　　L2Dwidget.init({ "model": { jsonPath:
				　　"https://unpkg.com/live2d-widget-model-"+name+"@1.0.5/assets/"+name+".model.json",
				　　"scale": 1 }, "display": { "position": "right", "width": 100, "height": 200,
				　　"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
				　　"react": { "opacityDefault": 0.6, "opacityOnHover": 0.2 } });
			}
			bn();
		</script>
		
	</footer>
</BODY>
</HTML>
